<html>
    <head>
        <meta charset="utf-8">
        <title>绘制图元完成事件(draw:created)</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>

        <!-- 1) 添加leaflet.draw插件的引用 -->
        <link rel="stylesheet" type="text/css" href="../lib/plugins/draw/leaflet.draw.css"/>
        <script type="text/javascript" src="../lib/plugins/draw/leaflet.draw.js"></script>

        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                map = L.map("mapDiv", {
                    layers:[
                        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')
                    ],
                    center: [39.90,116.39],
                    zoom: 9,
                });

                var editableLayers = new L.FeatureGroup().addTo(map);

                var options = {
                    edit: {
                        featureGroup: editableLayers
                    }
                };

                var drawControl = new L.Control.Draw(options).addTo(map);

                //1)绑定"draw:created"事件
                map.on("draw:created", function (e) {
                    //2)读取要素的类型和要素
                    var type = e.layerType;     //要素类型
                    var feature = e.layer;      //要素对象
                
                    if (type === 'marker') {
                        layer.bindPopup('A popup!');
                    }
                    //3)将要素添加到图层上
                    editableLayers.addLayer(feature);
                });
            }
        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



